<template>
  <div class="global-container">
    <Asteps :stepActive="stepActive" />
    <div class="steps-content">
      <Steps1 v-if="stepActive === 0" @nextDisabled="nextDisabled = $event" />
      <Steps2
        v-if="stepActive === 1"
        ref="Steps2"
        :certType="certType"
        @initReady="hasEditQualifications"
        @loading="handleLoading"
      />
      <Steps3
        v-if="stepActive === 2"
        ref="Steps3"
        :id="infoId"
        :certType="certType"
        :bussType="bussType"
        @loading="handleLoading"
      />
      <Steps4
        v-if="stepActive === 3"
        ref="Steps4"
        :id="infoId"
        :bussType="bussType"
        @loading="handleLoading"
      />
      <Steps5 v-if="stepActive === 4" :id="infoId" :bussType="bussType" @loading="handleLoading"/>
      <Steps6 v-if="stepActive === 5" :bussType="bussType" />
    </div>
    <div class="footer">
      <template v-if="stepActive != 5">
        <el-button
          type="primary"
          class="btn"
          v-if="stepActive == 2"
          :disabled="saveDisabled"
          @click="save"
          >暂存</el-button
        >
        <el-button
          v-if="stepActive != 0 && stepActive != 1"
          type="primary"
          class="btn"
          @click="previous"
          >上一步
        </el-button>
        <el-button
            v-if="stepActive == 1 && (bussType == 1 || bussType == 'a')"
            type="primary"
            class="btn"
            :disabled="nextDisabled"
            @click="editUserInfo"
        >修改个人信息
        </el-button>
        <el-button
            v-if="stepActive == 1 && (bussType == 1 || bussType == 'a')"
            type="primary"
            class="btn"
            :disabled="nextDisabled"
            @click="editUserQualification"
        >修改资质信息
        </el-button>
        <el-button
          v-if="
            stepActive == 0 ||
            stepActive == 1 ||
            (stepActive == 2 && infoId) ||
            stepActive == 3
          "
          type="primary"
          class="btn"
          :disabled="nextDisabled"
          @click="next"
          >下一步
        </el-button>
        <el-button
          type="primary"
          class="btn"
          v-if="stepActive == 4"
          @click="submit"
          >确认提交</el-button
        >
      </template>
    </div>
  </div>
</template>
<script>
import Asteps from '@/components/Steps/Asteps.vue';
import Steps1 from '@/views/apply-online/personal/need-apply/components/Steps1.vue';
import Steps2 from '@/views/apply-online/personal/need-apply/components/Steps2.vue';
import Steps3 from '@/views/apply-online/personal/need-apply/components/Steps3.vue';
import Steps4 from '@/views/apply-online/personal/need-apply/components/Steps4.vue';
import Steps5 from '@/views/apply-online/personal/need-apply/components/Steps5.vue';
import Steps6 from '@/views/apply-online/personal/need-apply/components/Steps6.vue';
import businessApi from '@/api/business';
export default {
  props: {
    // 申请id
    id: {
      type: String,
    },
    // 申请类型
    bussType: {
      default: '1',
    },
    // 证书类型
    certType: {
      default: '1',
    },
  },
  components: { Asteps, Steps1, Steps2, Steps3, Steps4, Steps5, Steps6 },
  data() {
    return {
      stepActive: 0,
      // 申请id
      infoId: null,
      // 下一步按钮是否禁用
      nextDisabled: false,
      // 暂存按钮是否禁用
      saveDisabled: false,
    };
  },
  watch: {
    id: {
      handler(val) {
        this.infoId = val;
        this.init();
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.$route.query.stepActive) {
      this.stepActive = +this.$route.query.stepActive;
      this.nextDisabled = false;
    }
  },
  computed: {
    // 证书类型
    certificate() {
      switch (this.bussType) {
        case 1:
        case 2:
        case 3:
        case 4:
          return 1;
        case 5:
        case 6:
          return 2;
        case 'a':
        case 'b':
        case 'c':
        case 'd':
          return 3;
        default:
          return null;
      }
    }
  },
  methods: {
    async init() {
      // 申请id存在，跳转到申请页，并获取详情
      if (this.infoId) {
        this.stepActive = 2;
        this.nextDisabled = false;
        this.$refs.Steps2.init();
      }
    },
    save() {
      // 暂存
      this.$refs.Steps3.save().then((res) => {
        if(res.infoId){
          this.infoId = res.infoId;
        }
      });
    },
    // 上一步
    previous() {
      this.stepActive = this.stepActive - 1;
    },
    // 下一步
    next(e) {
      // 强制失焦
      if (e) {
        let target = e.target;
        if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
          target = target.parentNode;
        }
        target.blur();
      }
      if (this.stepActive == 2) {
        this.$refs.Steps3.save().then((res) => {
          if (res.infoId) {
            this.infoId = res.infoId;
            this.stepActive = this.stepActive + 1;
          }
        });
        return;
      }
      if (this.stepActive == 3 && this.$refs.Steps4.validTable()) {
        return false;
      }
      this.stepActive = this.stepActive + 1;
    },
    // 跳转到修改个人信息页面
    editUserInfo() {
      this.$router.push('/dockPersonalUserInfo');
    },
    // 跳转到修改资质信息页面
    editUserQualification() {
      this.$router.push({
        name: 'dockPersonalUserInfoQlf',
        params: {
          ...this.$route.query,
          certificate: this.certificate,
          stepActive: this.stepActive,
        },
      });
    },
    // 提交
    async submit() {
      try {
        // 确认提交
        await this.$confirm('你确认要提交申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        });
        let params = {
          applyId: this.infoId,
        };
        // 根据业务类型调用不同的接口
        await businessApi[`saveUserBusiness${this.bussType}`](1, params);
        this.$message.success('提交成功!');
        this.next();
      } catch (error) {
        console.log(error);
      }
    },
    // 是否可编辑资质
    hasEditQualifications(data) {
      // 二级造价工程师（水利工程）资格证书
      if (this.certType == 1) {
        // 没有纸质证书，且没有申请id
        if (!data.paperCertCode && !this.infoId) {
          this.$alert(
              '未查询到您的二级造价工程师（水利工程）资格证书信息，请您前往完善资格信息',
              '提示',
              {
                confirmButtonText: '确定',
                showClose: false,
                type: 'warning',
                center: true,
                callback: () => {
                  this.$router.push({
                    name: 'dockPersonalUserInfoQlf',
                    params: {
                      ...this.$route.query,
                      stepActive: this.stepActive,
                    },
                  });
                },
              },
          );
          return false;
        }
        // 安全管理人员资格证书
      } else if (this.certType == 3) {
        // 没有安全管理人员资格成绩、类型，且没有申请id
        if (!this.hasSafeTypeGrade(data) && !this.infoId) {
          this.$alert(
              '未查询到您的安全生产管理人员知识考试信息，请您前往完善资格信息',
              '提示',
              {
                confirmButtonText: '确定',
                showClose: false,
                type: 'warning',
                center: true,
                callback: () => {
                  this.$router.push({
                    name: 'dockPersonalUserInfoQlf',
                    params: {
                      ...this.$route.query,
                      certificate: 3,
                      stepActive: this.stepActive,
                    },
                  });
                },
              },
          );
          return false;
        } else {
          this.$store.commit('user/setUserQua', data.safeQua);
        }
      }
    },
    // 是否有安管人员考试成绩
    hasSafeTypeGrade(data) {
      const { safeQua } = data;
      return safeQua && (safeQua.mainScore || safeQua.projScore || safeQua.classifyScore);
    },
    // 加载中
    handleLoading(status) {
      this.$emit('loading', status);
    }
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;

  .steps-content {
    flex: 1;
  }

  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .btn {
      margin-left: 24px;
      width: 120px;
    }
  }
}
</style>
